import { useEffect, useState } from "react";
import styled from "styled-components";

const StyledEmoji = styled.div`
  font-size: 12rem;
  text-align: center;
  margin: 20px 0;
  user-select: none;
  cursor: pointer;
`;

const emojis = ["🤖", "😉", "🤩", "👽", "😸", "😁", "😚", "🤑", "😒", "🤯"];

function Emoji() {
  const [randomEmoji, setRandomEmoji] = useState("");

  function handleClick() {
    setRandomEmoji(emojis[Math.floor(Math.random() * emojis.length)]);
  }

  useEffect(function () {
    handleClick();
  }, []);

  return <StyledEmoji onClick={handleClick}>{randomEmoji}</StyledEmoji>;
}

export default Emoji;
